<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">

	<rich:panel>
		<f:facet name="header">
			<h:outputText value="#{msg.filtrarBusqueda}" />
		</f:facet>
		<a4j:outputPanel ajaxRendered="true">
			<h:panelGrid columns="1"
				style="margin-left: auto; margin-right: auto; text-align: center;">
				<rich:graphValidator value="#{beanLink}">
					<h:panelGrid columns="3">
						<h:outputText value="#{msg.brand}:" />
						<rich:comboBox value="#{beanLink.brand}" id="brandCombo"
							valueChangeListener="#{beanLink.selectionChanged}"
							style="width:200px;" defaultLabel="-- Marcas registradas --">
							<f:selectItems value="#{beanLink.brandList}" />
							<a4j:support event="onchange" ajaxSingle="true"
								reRender="modelCombo" />
						</rich:comboBox>
						<rich:message for="brandCombo" />
						<h:outputText value="#{msg.model}:" />
						<a4j:outputPanel id="linkModelPanel" ajaxSingle="true">
							<rich:comboBox value="#{beanLink.model}" id="modelCombo"
								style="width:200px;" defaultLabel="-- Modelos disponibles --">
								<f:selectItems value="#{beanLink.modelList}" />
							</rich:comboBox>
						</a4j:outputPanel>
						<rich:message for="modelCombo" />
					</h:panelGrid>
					<a4j:commandButton value="#{msg.filtrar}"
						action="#{beanLink.availableDevices}" reRender="table" />
				</rich:graphValidator>
			</h:panelGrid>
		</a4j:outputPanel>
	</rich:panel>
	<rich:spacer height="20px" />
	<rich:extendedDataTable value="#{beanLink.readerItems}" var="item"
		id="table" rows="10" reRender="datascroller"
		style="margin-left: auto; margin-right: auto; text-align: center;"
		height="320px">
		<rich:column id="serialNumberColumn" label="#{msg.serialNumber}"
			width="35%">
			<f:facet name="header">
				<h:outputText value="#{msg.serialNumber}" />
			</f:facet>
			<h:outputText value="#{item.serialNumber}" />
		</rich:column>
		<rich:column id="versionColumn" label="#{msg.version}" width="35%">
			<f:facet name="header">
				<h:outputText value="#{msg.version}" />
			</f:facet>
			<h:outputText value="#{item.version}" />
		</rich:column>
		<rich:column width="35%" id="acciones" label="#{msg.acciones}">
			<f:facet name="header">
				<h:outputText value="#{msg.acciones}" />
			</f:facet>
			<a4j:commandLink id="linkNewReader" action="#{beanLink.continuar}">
				<h:graphicImage value="/static/images/link_add.ico"
					style="border: 0" />
				<f:setPropertyActionListener value="#{item}"
					target="#{beanLink.currentReader}" />
			</a4j:commandLink>
		</rich:column>
		<f:facet name="footer">
			<rich:datascroller id="datascroller" renderIfSinglePage="false" />
		</f:facet>
	</rich:extendedDataTable>
</ui:composition>